<template>
  <div>
    <van-nav-bar title="登录" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="userForm.mobile"
        name="mobile"
        placeholder="请输入手机号"
        left-icon="phone-o"
        :rules="loginFormRule.mobile"
      />
      <van-field
        v-model="userForm.code"
        name="code"
        placeholder="请输入验证码"
        left-icon="comment-o"
        :rules="loginFormRule.code"
      >
        <template #button>
          <van-button size="small" type="primary"  native-type="button">发送验证码</van-button>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button  block type="info" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userForm: {
        mobile: '张三',
        code: '123',
      },
      loginFormRule: {
        mobile: [{ required: true, message: '请填写手机号' }],
        code: [{ required: true, message: '请填写验证码' }],
      },
    }
  },
  methods: {
    onSubmit() {
      console.log('123')
    },
  },
  created() {},
  mounted() {},
}
</script>

<style lang="less" scoped>
.van-field__left-icon{
    .van-icon{
    line-height: 24px;
    font-size: 18px;
}
}

</style>
